import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import swal, { SweetAlertType } from 'sweetalert2';
import {HttpService} from "@core/services/http.service";
import {HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-c-img-tool',
  templateUrl: './c-img-tool.component.html',
  styleUrls: ['./c-img-tool.component.less']
})
export class CImgToolComponent implements OnInit {
    @Output() onChange = new EventEmitter<any>();
    @Output() onChangeTxt = new EventEmitter<any>();
    @Output() onDelete = new EventEmitter<any>();
    _rightSrc;
    @Input()
    set rightSrc(value){
        this._rightSrc = value;
        this.onChangeTxt.emit({
            src: this._rightSrc
        });
    }

    get rightSrc(){
        return this._rightSrc;
    }

    _rightStyleX;
    @Input()
    set rightStyleX(value){
        this._rightStyleX = value;
        this.emitXYWH();
    }

    get rightStyleX(){
        return this._rightStyleX;
    }

    _rightStyleY;
    @Input()
    set rightStyleY(value){
        this._rightStyleY = value;
        this.emitXYWH();
    }

    get rightStyleY(){
        return this._rightStyleY;
    }

    _rightStyleW;
    @Input()
    set rightStyleW(value){
        this._rightStyleW = value;
        this.emitXYWH();
    }

    get rightStyleW(){
        return this._rightStyleW;
    }

    _rightStyleH;
    @Input()
    set rightStyleH(value){
        this._rightStyleH = value;
        this.emitXYWH();
    }

    get rightStyleH(){
        return this._rightStyleH;
    }



    constructor(public http: HttpService, public httpClient: HttpClient) { }

    ngOnInit() {

    }

    emitXYWH() {
        this.onChange.emit({
            x: this._rightStyleX,
            y: this._rightStyleY,
            width: this._rightStyleW,
            height: this._rightStyleH
        });
    }

    uploading = false;
    fileChange($event) {
        this.uploading = true;
        const file: File = $event.target.files[0];
        const myReader: FileReader = new FileReader();
        const that = this;
        myReader.onloadend = (loadEvent: any) => {
            const img = new Image();
            img.src = loadEvent.target.result;
            img.onload = function() {
                that.rightStyleW = this['width'];
                that.rightStyleH = this['height'];
            };
        };

        const formData: FormData = new FormData();
        formData.append('uploadFile', file);
        formData.append('Type', 'Image');

        this.httpClient.post(this.http.BASE_URL + '/fileUp/uploadFile', formData).subscribe(res => {
            if (res['code'] === '0') {
                myReader.readAsDataURL(file);
                this.rightSrc = this.http.IP_PORT + res['filepath'];
                swal(`${res['msg']}`, '', 'info');
            } else {
                swal(`${res['msg']}`, '', 'info');
            }
            this.uploading = false;
        });
    }

    deleteComponent() {
        this.uploading = false;
        this.onDelete.emit();
    }

    save() {
        swal(`保存成功`, '', 'info');
    }
}
